<template>
	<view class="person-container">
		<navBar></navBar>
		<view class="person-info">
			<view class="job-title">
				<view class="title">工作要求</view>
			</view>
			<view class="info-main">
				<view class="main-item"
				 v-for="(item, index) in form.formLabel"
				 :key="index">
					<view class="item-label">{{ item.label }}</view>
					<view class="item-type">
				   	<view @click="open(1)" class="type-item" v-if="item.type==='address'">{{ form.address ? form.address : '请选择' }}</view>
				   	<view @click="open(2)" class="type-item" v-if="item.type === 'time'">{{ form.time ? form.time : '请选择' }}</view>
						<image src="@/static/img/common/arrr.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<timeSlot
			    ref="timeslot"
			    :title="'选择时间段'"
			    @confirm="confirmTime"/>
		<!-- 区域选择 -->
		<areaSelect ref='areaChoose' @confirm='areaConfirm'></areaSelect>			
		<view class="btn">
			<button class="btns" @click="save">保存</button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'	
import { onLoad } from '@dcloudio/uni-app'
import navBar from '@/components/navBar.vue';
import timeSlot from "@/components/wanghexu-timeslot/wanghexu-timeslot.vue"
import areaSelect from '@/components/area-choose/area-choose.vue'
import api from '@/utils/api/recruit.js'
import { showToast } from '@/utils/toast.js'
// const title = ref('工作经历')
const form = reactive({
	formLabel: [
		{ label: '工作时间', prop: '', type: 'time' },
		{ label: '工作区域', prop: '', type: 'address' },
	],
	formData: {},
	address: '',
	time: ''
})
const timeslot = ref(null)
const areaChoose = ref(null)
// 选择时间
const confirmTime = e => {
	form.formData.wordTime = `${e.start.hour}:${e.start.min} - ${e.end.hour}:${e.end.min}`
	form.time = `${e.start.hour}:${e.start.min}-${e.end.hour}:${e.end.min}`
}
// 选择区域
const areaConfirm = val => {
	form.address = `${val.addressList[0]}-${val.addressList[1]}-${val.addressList[2]}`
	form.formData.provinceName = val.addressList[0]
	form.formData.cityName = val.addressList[1]
	form.formData.districtName = val.addressList[2]
}
const open = index => {
	if(index === 1) {
		areaChoose.value.show()
	} else {
		timeslot.value.open()
	}
}
// 保存
const save = async _ => {
	if(!form.formData.wordTime){
		return showToast('请选择工作时间')
	}

	if(!form.formData.provinceName){
		return showToast('请选择工作城市')
	}
	let data = {
		saveType: 'JOB_REQUIREMENTS',
		appUserResume: form.formData
	}
	const res = await api.saveUserResume(data)
	if(res.code === 200) {
		showToast(res.msg)
		uni.$emit('refsh')
		uni.navigateBack()
	}
	console.log(res, '=====');
}
</script>

<style lang="scss" scoped>
::v-deep .is-input-border{
	border: none !important;
}	
::v-deep .uni-easyinput__content-textarea{
	min-height: 200rpx !important;
	height: 300rpx !important;
}
::v-deep .uni-easyinput__content-input{
	padding-left: 0 !important;
}
::v-deep .uni-date-x--border{
	border: none !important;
}
::v-deep .uni-icons{
	display: none !important;
}
.person-container{
	height: 100vh;
	background: #fff;
	.person-info{
		padding: 32rpx;
		box-sizing: border-box;
		// margin-top: 30rpx;
		.job-title{
			// margin-top: 32rpx;
			padding-left: 52rpx;
			box-sizing: border-box;
			.title{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 48rpx;
				color: #333333;
				line-height: 72rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			}
		.info-main{
			width: 100%;
		
			.main-item{
				display: flex;
				// align-items: center;
				flex-direction: column;
				// justify-content: space-between;
					.item-label{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 32rpx;
						color: #262626;
						line-height: 48rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin: 16rpx 0;

				}

				.item-type{
					display: flex;
					align-items: center;
					// height: 70rpx;
					padding: 32rpx 0;
					box-sizing: border-box;
					border-bottom: 1rpx solid #E5E5E5;
					.type-item{
						flex: 1;
						height: 40rpx;
					}
					image{
						width: 38rpx;
						height: 38rpx;
					}
				}
			}
		}
	}
	.btn{
		position: fixed;
		bottom: 0;
		left: 0;
		height: 180rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background: #fff;
		width: 100%;
		display: flex;
		.btns{
			width: 640rpx;
			height: 88rpx;
			background: #6B64D3;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			color: #fff;
		}
	}
}
</style>
